<template>
    <div class="user-info-box flex-col-start" @mousedown="moveBox">
        <div class="user-info-head flex-col-center">
            <div class="user-info-head-img">
                <YImage url="http://www.youlibin.top:8090/image/934453e.jpg.jpg" ></YImage>
            </div>

            <div style="font-size: 25px;color: tomato;margin: 20px">
                {{userInfo.userNick}}
            </div>
        </div>
        <div class="user-info-body flex-col-center">
           <table>
               <tr>
                   <td>用户名称</td>
                   <td>{{userInfo.userNick}}</td>
               </tr>
               <tr>
                   <td>邮箱</td>
                   <td>{{userInfo.email}}</td>
               </tr>
               <tr>
                   <td>手机号</td>
                   <td>{{userInfo.mobile}}</td>
               </tr>
               <tr>
                   <td>学校信息</td>
                   <td>{{userInfo.schoolId}}</td>
               </tr>
               <tr>
                   <td>创建时间</td>
                   <td>{{userInfo.gmtCreate}}</td>
               </tr>
           </table>
        </div>
    </div>
</template>

<script>
    import {userRequest} from "@/api/user";
    import YImage from "@/components/image/YImage";

    export default {
      name: "UserChatInfoCard",
      components: {YImage},
      props: ['id'],
      data() {
        return {
          userInfo: {
            userId: 0,
            userName: "",
            userNick: "",
            email: "",
            mobile: "",
                    gmtCreate:"",
                    schoolId:0,
                }
            }
        },
        methods:{
            moveBox(){
                console.log('x')
            },
            initUser(){
                userRequest.getUserById(1).then(resp=>{
                    if(resp.code===0){
                        this.userInfo=resp.userInfo

                        console.log('user',this.userInfo)
                    }
                })
            }
        },
        mounted() {
            this.initUser()
        }
    }
</script>

<style scoped lang="less">
    .user-info-box {
      width: 30vw;
      min-height: 80vh;
      min-width: 400px;
      background-color: #2b2b2b;
      position: absolute;
      left: 40%;
      top: 10%;
      z-index: 1;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
        justify-content: flex-start;
        .user-info-head{
            width: 90%;
            flex: 1;

            .user-info-head-img{
                width: 30%;
                border-radius: 2px;
                overflow: hidden;
            }
        }
        .user-info-body{
            width: 90%;
            flex: 1;
            table{
                width: 90%;
                height:80%;
                color: #98A6B3;


            }

        }
    }
</style>